<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>加载天地图轨迹</title>
	<script type="text/javascript" src="http://api.tianditu.com/js/maps.js"></script>
	<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
</head>

<body>
	<style type="text/css">
		#mapDiv {
			height: 600px;
			margin: 10px;
			border: 1px solid #ccc;
		}
	</style>
	<div id="mapDiv"></div>
	<script type="text/javascript">
		var map;
		var lnglats = [];//这是页面需要的数据。实际应用中常用ajax获取。坐标点状态。点的类型。点的名字。
		var Tlnglats = []//天地图化之后的坐标点。
		var iconMakers = [];//装标注点用。
		var points = [];

		//加载数据。
		function loadData() {
			// $.ajaxSettings.async = false;
			// $.getJSON('php/loadTrack.php','', function(json, textStatus) {
			// 	lnglats = json;
			// 	for(var i =0,len = lnglats.length;i<len;i++){
			// 		Tlnglats.push(new TLngLat(lnglats[i].L, lnglats[i].B));
			// 	}
			// });
			// $.ajaxSettings.async = true;

			lnglats = [
				{ "B": "23.1", "L": "113.3", "PName": "1111", "Status": 1 },
				{ "B": "23.5", "L": "113.4", "PName": "2222", "Status": 1 },
				{ "B": "23.9", "L": "114.1", "PName": "3333", "Status": 3004 },
				{ "B": "24.7", "L": "114.8", "PName": "第四个点", "Status": 1 },
				{ "B": "24.8", "L": "115.5", "PName": "第五个点", "Status": 1 },
				{ "B": "25.3", "L": "116.2", "PName": "第六个点", "Status": 1 },
				{ "B": "26.1", "L": "116.7", "PName": "7777", "Status": 1 },
				{ "B": "27.5", "L": "117.3", "PName": "8888", "Status": 1 }];

			for (var i = 0, len = lnglats.length; i < len; i++) {
				Tlnglats.push(new TLngLat(lnglats[i].L, lnglats[i].B));
			}
		}

		//加载基本地图和导航
		function loadMap() {
			try {
				map = new TMap("mapDiv"); //初始化地图对象
				map.centerAndZoom(new TLngLat(103.388611, 35.563611), 4);//中国
				map.setViewport(Tlnglats);//根据天地图化的坐标组设置调整到最佳显示范围。
				map.enableHandleMouseScroll(); //允许鼠标双击放大地图   
			} catch (err) {
				alert('天地图加载不成功，请稍候再试！你可以先使用其他功能！');
			}
		}


		//把轨迹点放到地图上
		function loadTrack() {
			map.clearOverLays();
			var iconurl0 = 'images/pointOffline.jpg';//正常节点
			var iconurl1 = 'images/track_start_icon.png';//起点
			var iconurl2 = 'images/track_end_icon.png';//终点
			if (lnglats.length != 0) {
				markerOpt = new TMarkerOptions();
				var icon0 = new TIcon(iconurl0, new TSize(8, 8), { anchor: new TPixel(8, 10) });
				var icon1 = new TIcon(iconurl1, new TSize(39, 32), { anchor: new TPixel(17, 34) });
				var icon2 = new TIcon(iconurl2, new TSize(39, 32), { anchor: new TPixel(17, 34) });

				for (var i = 0; i < Tlnglats.length; i = i + 1) {

					if (i == 0) {
						iconMakers[i] = new TMarker(Tlnglats[i], { icon: icon1 });
						map.addOverLay(iconMakers[i]);//起点
					} else if (i == lnglats.length - 1) {
						iconMakers[i] = new TMarker(Tlnglats[i], { icon: icon2 });
						map.addOverLay(iconMakers[i]);//终点
					} else {
						iconMakers[i] = new TMarker(Tlnglats[i]);
						map.addOverLay(iconMakers[i]);
					}

				}

				var carMk = new TMarker(Tlnglats[0], { icon: icon0 });

				points = [Tlnglats[0], Tlnglats[1]]
				showLine(points);
				carMk.setLngLat(Tlnglats[1]);
				function resetMkPoint(i) {
					carMk.setLngLat(Tlnglats[i]);
					points = [Tlnglats[i - 1], Tlnglats[i]];
					showLine(points);
					if (i < Tlnglats.length - 1) {
						setTimeout(function () {
							i++;
							resetMkPoint(i);
						}, 500);
					}
				}

				setTimeout(function () {
					resetMkPoint(2);
				}, 500)


			}
		}


		//连线部分 轨迹
		function showLine(points) {
			var line = new TPolyline(points, {
				strokeColor: "green",
				strokeWeight: 2,
				strokeOpacity: 1
			});
			map.addOverLay(line);
		}


		loadData();
		loadMap();
		loadTrack();
	</script>
</body>

</html>